
<template>
  <el-form :inline="true" :model="formIn" class="demo-form-inline">
    <!-- 标题配置栏 -->
    <el-form-item label="部门名称">
      <el-input
        v-model="formIn.departmentNm"
        placeholder="请输入部门名称"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onsell" icon="el-icon-search"
        >查询</el-button
      >
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="cz" icon="el-icon-female"
        >重置</el-button
      >
    </el-form-item>
    <el-form-item>
      <el-button
        icon="el-icon-circle-plus-outline"
        type="primary"
        @click="jumpAddPartmentPage"
        >新增</el-button
      >
    </el-form-item>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="id" hidden="true" />
      <el-table-column prop="departmentName" label="部门名称" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="address" label="地址" />
      <el-table-column prop="pid" label="上级id" />
      <el-table-column prop="parentName" label="上级名称" />
      <el-table-column prop="isDelete" label="是否删除" />
      <el-table-column prop="orderNum" label="排序号" />
      <el-table-column label="操作" width="210" fixed="right">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" -->
          <el-button
            size="mini"
            @click="jumpEditPartmentPage(scope.$index, scope.row)"
            >编辑</el-button
          >

          <el-button
            size="mini"
            type="danger"
            @click="deleteDepartment(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增部门" :visible.sync="dialogFormVisible">
      <el-form :model="departmentform">
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input
            v-model="departmentform.departmentName"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="上级名称" :label-width="formLabelWidth">
          <el-select
            v-model="departmentform.pid"
            @change="changeSelect(departmentform.pid)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input
            v-model="departmentform.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input
            v-model="departmentform.address"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDepartment">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑部门" :visible.sync="dialogFormVisible1">
      <el-form :model="editdepartmentform">
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input
            v-model="editdepartmentform.departmentName"
            autocomplete="true"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="上级名称" :label-width="formLabelWidth">
          <el-select v-model="editdepartmentform.pid" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input
            v-model="editdepartmentform.phone"
            autocomplete="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input
            v-model="editdepartmentform.address"
            autocomplete="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="editDepartment">确 定</el-button>
      </div>
    </el-dialog>
  </el-form>
</template>


<script>
import {
  getDepartments,
  getDepartmentXlk,
  getDepartmentTree,
  addDepartment,
  editDepartment,
  deleteDepartment,
} from "@/api/department";

export default {
  name: "department",
  data() {
    return {
      formIn: {
        departmentNm: "",
      },
      departmentform: {
        departmentName: "",
        phone: "",
        address: "",
        delivery: false,
      },
      editdepartmentform: {
        departmentName: "",
        phone: "",
        address: "",
        delivery: false,
      },
      tableData: [],
      options: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,

      formLabelWidth: "120px",

      selectLabel: "",
      selectValue: "",
    };
  },

  created() {
    this.selectall();
    this.selectXLK();
  },
  methods: {
    async onsell() {
      const likesell = {
        departmentName: this.formIn.departmentNm,
      };
      console.log("查询条件_________department,", this.formIn.departmentNm);
      let res = await getDepartments(likesell);
      this.tableData = res.data;
    },

      async deleteDepartment (index, row) {
      console.log('index___________删除页面，index:', index)
      console.log('row___________删除页面，row:', row)

      const params = {
        id:row.id,
      }
      await deleteDepartment(params);
      this.onsell();
    },


    async selectall() {
      //查询全部数据
      let res = await getDepartmentTree();
      console.log("查询全部部门数据_________res,", res);
      this.tableData = res.data;
    },
    async selectXLK() {
      //下拉框
      let res = await getDepartmentXlk();
      console.log("查询全部有效的部门数据_________res,", res);
      this.options = res.data;
    },
    async cz() {
      formIn.departmentNm = null;
    },
    async editDepartment() {
      console.log(
        "编辑部门已点击确认this.editdepartmentform_____",
        this.editdepartmentform
      );
      const gou = { ...this.editdepartmentform };
      console.log("新增的数据是_________gou,", gou);
      await editDepartment(gou);

      this.dialogFormVisible1 = false;
      this.selectall();
    },
    async jumpAddPartmentPage() {
      this.dialogFormVisible = true;
    },
    async jumpEditPartmentPage(index, row) {
      this.dialogFormVisible1 = true;
      console.log("index______________________", index);
      console.log("row______________________", row);
      this.editdepartmentform.departmentName = row.departmentName;
      this.editdepartmentform.address = row.address;
      this.editdepartmentform.phone = row.phone;
      this.editdepartmentform.id = row.id;

      console.log(this.editdepartmentform);
    },

    async addDepartment() {
      this.dialogFormVisible = false;
      this.dialogFormVisible1 = false;
      const yang = { ...this.departmentform };
      yang.pid = this.selectValue;
      yang.parentName = this.selectLabel;
      console.log("新增的数据是_________yang,", yang);
      await addDepartment(yang);
      this.selectall();
    },

    changeSelect(item) {
      console.log("选中下拉框，发生变化时调用，打印item:", item);
      this.selectValue = item.value;
      this.selectLabel = item.label;

      console.log(
        "选中下拉框，发生变化时调用，打印selectValue:",
        this.selectValue
      );
      console.log(
        "选中下拉框，发生变化时调用，打印selectLabel:",
        this.selectLabel
      );
    },
  },
};
</script>

<style lang="sess">
</style>